<template>
  <div class="list-container">
    <div class="table-panel">
      <el-table ref="filterTable" :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <div v-for="item in props.row.children" :key="item.id">
                <el-form-item label="字段ID：" style="min-width: 100px">
                  <span>{{ item.id }}</span>
                </el-form-item>
                <el-form-item label="字段名称：" style="min-width: 200px">
                  <span>{{ item.name }}</span>
                </el-form-item>
                <el-form-item label="操作时间：" style="width: 220px">
                  <span>{{
                    item.createTime == null
                      ? "无"
                      : item.createTime.replace("T", " ")
                  }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="updateItem(item, props.row.name)"
                    >修改</el-button
                  >
                  <el-button
                    type="primary"
                    @click="deleteItem(item.id, props.row.name)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="字段组名称"
          min-width="150px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          min-width="250px"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="operator"
          label="操作人"
          min-width="150px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="time"
          label="操作时间"
          min-width="150px"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          min-width="230px"
        >
          <template slot-scope="scope">
            <el-button
              @click="add(scope.row)"
              type="text"
              icon="el-icon-circle-plus-outline"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="small-dialog"
      width="600px"
      :title="title"
      :visible.sync="dialogFormVisible"
    >
      <el-form style="width: 350px; margin: 0 auto" :model="form" :rules="rules">
        <el-form-item label="字段名称：" label-width="100px">
          <el-input
            style="width: 220px"
            disabled
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="attributeName" label="属性名称：" label-width="100px">
          <el-input
            style="width: 220px"
            v-model="form.attributeName"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProjectType,
  getProjectPurpose,
  getProjectStatus,
  insertProjectPurpose,
  insertProjectType,
  insertProjectStatus,
  updateProjectType,
  updateProjectPurpose,
  updateProjectStatus,
  deleteProjectType,
  deleteProjectPurpose,
  deleteProjectStatus,
} from "@/api/dashboard";
export default {
  data() {
    return {
      tableData: [
        {
          name: "项目类别",
          description: "设置表单中项目类别选项",
          operator: "",
          time: "",
          children: {},
        },
        {
          name: "工程用途",
          description: "设置表单中工程用途选项",
          operator: "",
          time: "",
          children: {},
        },
        {
          name: "工程状态",
          description: "设置表单中工程状态选项",
          operator: "",
          time: "",
          children: {},
        },
      ],
      projectChoiceList: [],
      projectEffectList: [],
      projectStatusList: [],
      dialogFormVisible: false,
      form: {
        attributeName: "",
      },
      rules:{
        attributeName:[
            { required: true, message: '请输入字段名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 2 到 8 个字符', trigger: 'blur' }
          ],
      },
      updateConfirm: false,
      updateInfo: {},
      title: '添加字段'
    };
  },
  created() {
    getProjectType().then((res) => {
      // console.log(res.data.data)
      this.projectChoiceList = res.data.data;
      this.tableData[0].children = JSON.parse(
        JSON.stringify(this.projectChoiceList).replace(/typeName/g, "name")
      );
      getProjectPurpose().then((res) => {
        // console.log(res.data.data)
        this.projectEffectList = res.data.data;
        this.tableData[1].children = JSON.parse(
          JSON.stringify(this.projectEffectList).replace(/purposeName/g, "name")
        );
        getProjectStatus().then((res) => {
          // console.log(res.data.data)
          this.projectStatusList = res.data.data;
          this.tableData[2].children = JSON.parse(
            JSON.stringify(this.projectStatusList).replace(
              /statusName/g,
              "name"
            )
          );
        });
      });
    });
  },
  methods: {
    add(row) {
      this.dialogFormVisible = true;
      this.title = '添加字段'
      this.form.name = row.name;
    },
    checkForm(){
      if(this.form.attributeName==undefined||this.form.attributeName==""){
        return false
      }else if(this.form.attributeName.length>8||this.form.attributeName.length<2){
        return false
      }
      else return true
    },
    confirmAdd() {
      if(this.checkForm()){
        if (this.form.name == "项目类别") {
        console.log(this.form.attributeName);
        if (this.updateConfirm) {
          this.updateType();
        } else {
          insertProjectType({ typeName: this.form.attributeName }).then(() => {
            this.dialogFormVisible = false;
            this.form = { attributeName: "" };
            this.getType();
          });
        }
      } else if (this.form.name == "工程用途") {
        if (this.updateConfirm) {
          this.updatePurpose();
        } else {
          insertProjectPurpose({ purposeName: this.form.attributeName }).then(
            () => {
              this.dialogFormVisible = false;
              this.form = { attributeName: "" };
              this.getPurpose();
            }
          );
        }
      } else {
        if (this.updateConfirm) {
          this.updateStatus();
        } else {
          insertProjectStatus({ statusName: this.form.attributeName }).then(
            () => {
              this.dialogFormVisible = false;
              this.form = { attributeName: "" };
              this.getStatus();
            }
          );
        }
      }
      }
      
    },
    getType() {
      getProjectType().then((res) => {
        // console.log(res.data.data)
        this.projectChoiceList = res.data.data;
        this.tableData[0].children = JSON.parse(
          JSON.stringify(this.projectChoiceList).replace(/typeName/g, "name")
        );
      });
    },
    getPurpose() {
      getProjectPurpose().then((res) => {
        // console.log(res.data.data)
        this.projectEffectList = res.data.data;
        this.tableData[1].children = JSON.parse(
          JSON.stringify(this.projectEffectList).replace(/purposeName/g, "name")
        );
      });
    },
    getStatus() {
      getProjectStatus().then((res) => {
        // console.log(res.data.data)
        this.projectStatusList = res.data.data;
        this.tableData[2].children = JSON.parse(
          JSON.stringify(this.projectStatusList).replace(/statusName/g, "name")
        );
      });
    },
    updateType() {
      console.log(this.form);
      updateProjectType({
        id: this.form.id,
        typeName: this.form.attributeName,
      }).then(() => {
        this.$message({
          message: "修改成功!",
          type: "success",
        });
        this.dialogFormVisible = false;
        this.form = { attributeName: "" };
        this.updateConfirm = false;
        this.getType();
      });
    },
    updatePurpose() {
      console.log(this.form);
      updateProjectPurpose({
        id: this.form.id,
        purposeName: this.form.attributeName,
      }).then(() => {
        this.$message({
          message: "修改成功!",
          type: "success",
        });
        this.updateConfirm = false;
        this.dialogFormVisible = false;
        this.form = { attributeName: "" };
        this.getPurpose();
      });
    },
    updateStatus() {
      console.log(this.form);
      updateProjectStatus({
        id: this.form.id,
        statusName: this.form.attributeName,
      }).then(() => {
        this.$message({
          message: "修改成功!",
          type: "success",
        });
        this.updateConfirm = false;
        this.dialogFormVisible = false;
        this.form = { attributeName: "" };
        this.getStatus();
      });
    },
    deleteType(id) {
      deleteProjectType([id]).then((res) => {
        if (res.data.data > 0) {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          this.getType();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    deletePurpose(id) {
      deleteProjectPurpose([id]).then((res) => {
        if (res.data.data > 0) {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          this.getPurpose();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    deleteStatus(id) {
      deleteProjectStatus([id]).then((res) => {
        if (res.data.data > 0) {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          this.getStatus();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    updateItem(item, name) {
      this.title = '修改字段'
      console.log(item);
      console.log(name);
      this.form.id = item.id;
      this.form.attributeName = item.name;
      this.form.name = name;
      this.dialogFormVisible = true;
      this.updateConfirm = true;
    },
    deleteItem(id, name) {
      console.log(id);
      console.log(name);
      if (name == "项目类别") {
        this.deleteType(id);
      } else if (name == "工程用途") {
        this.deletePurpose(id);
      } else {
        this.deleteStatus(id);
      }
    },
  },
};
</script>